<template>
    <div>
        <el-row class="min-h-screen bg-indigo-500">
            <el-col :lg="16" :md="12" class="flex items-center justify-center ">
                <div>
                    <div class=" font-boid  text-5xl text-light-50 mb-4">欢迎光临</div>
                    <div class=" text-light-50  mb-1">嗨购管理服务器</div>
                </div>
            </el-col>
            <el-col :lg="8" :md="12" class=" bg-light-50 flex items-center justify-center flex-col">
                <h2 class="font-blod text-3xl text-gray-900 "> 欢迎回来</h2>
                <div class="flex items-center  justify-center my-5 text-gray-300 space-x-2 ">
                    <span class="h-[1px] w-16 bg-gray-200"></span>
                    <span>账号密码登录</span>
                    <span class="h-[1px] w-16 bg-gray-200"></span>
                </div>
                <el-form :model="form" ref="formRef" :rules="rules" class="w-[250px]">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入密码">
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button class="w-[250px]" type="primary" round color="#626aef" @click="onSubmit"  :loading="loading">登录</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
import { useStore } from 'vuex'
// import { useCookies } from '@vueuse/integrations/useCookies'
import { toast } from '~/composables/util'
//import { login , getinfo} from  '~/api/manager.js'
// do not use same name with ref
const form = reactive({
    username: "",
    password: ""
})
// 表单验证
const rules = {
    username: [{
        required: true,
        message: '用户名不能为空',
        trigger: 'blur'

    }],
    password: [{
        required: true,
        message: 'domain can not be null',
        trigger: 'blur'
    }]
}

const router =useRouter()
const store=useStore()
const formRef = ref(null)

// 请求限制
const loading=ref(false)

const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return false
        }
        console.log("验证通过");
        loading.value=true
        store.dispatch("login",form).then(res=>{
            toast("登录成功")
            router.push("/")
        }).finally(()=>{
            loading.value = false
        })
    //     login(form.username, form.password).
    //         then(res => {
    //             toast("登录成功",'success')
    //             router.push('/')
    //             // 使用cookies存储
    //             const cookies = useCookies()
    //             cookies.set('token', res.token)

    //             //获取管理员信息和权限菜单
    //             getinfo().then(ress=>{
    //                 store.commit("SET_USERINFO",ress)
    //             })
    //         })
    //         .finally(()=>{
    //             loading.value=false
    //         })
    })
}
</script>
<style>

</style>